<script setup lang="ts">
import { computed, reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { useStore } from '@/store';
import { useI18n } from 'vue-i18n';
import { saveOrderApi } from '@/api/order';
import { saveRecordApi } from '@/api/record';
import { useRoute, useRouter } from 'vue-router';
const { t } = useI18n();
const store = useStore();
const roomDetail = computed(() => store.state.roomDetail);
const orderForm = reactive({
  personNumber: 1,
});
const route = useRoute();
const router = useRouter();
const ruleForm = ref();
const { proxy }: any = getCurrentInstance();

function submitForm() {
  if (store.state.userStatus) {
    saveOrder();
  } else {
    proxy.$message.warning(t('login.loginLost'));
    const { pathname } = window.location;
    router.replace({
      path: '/login',
      query: {
        redirect: pathname,
      },
    });
  }
}
// 立即预定
function saveOrder() {
  const { id: orderId } = route.params;
  const { title, price, imgs } = roomDetail.value;
  const { personNumber } = orderForm;
  const params = {
    orderId,
    title,
    price,
    personNumber,
    pictureUrl: imgs[0],
  };
  saveOrderApi(params).then((res) => {
    console.log(res);
    let { success, message } = res;
    if (success) {
      proxy.$message.success('预定成功');
    } else {
      proxy.$message.error(message);
    }
  });
}
// 保存历史足迹
function saveRecord() {
  const { id: recordId } = route.params;
  const { title, price, personNumber, imgs } = roomDetail.value;
  const params = {
    recordId,
    title,
    personNumber,
    pictureUrl: imgs[0],
    price,
  };
  saveRecordApi(params).then((res) => {
    console.log(res);
    let { success, message } = res;
    if (success) {
      proxy.$message.success('记录成功');
    } else {
      proxy.$message.error(message);
    }
  });
}
onMounted(() => {
  saveRecord();
});
</script>

<template>
  <div v-if="roomDetail && roomDetail.info && roomDetail.owner">
    <!--照片墙-->
    <el-carousel
      v-if="roomDetail.imgs && roomDetail.imgs.length > 0"
      class="imgs-wall"
      trigger="click"
      height="380px"
      :interval="3000"
      indicator-position="none"
      type="card"
    >
      <el-carousel-item v-for="(item, index) in roomDetail.imgs" :key="index">
        <img :src="item" />
      </el-carousel-item>
    </el-carousel>
    <div class="main-wapper">
      <!--房屋详情信息-->
      <div class="room-detail">
        <div class="detail-part">
          <h2>{{ roomDetail.title }}</h2>
          <div class="info">
            <span class="room"
              >{{ roomDetail.info.room }} {{ t('detail.rooms') }}</span
            >
            <span class="bed"
              >{{ roomDetail.info.bed }} {{ t('detail.beds') }}</span
            >
            <span class="toilet"
              >{{ roomDetail.info.toilet }} {{ t('detail.bathrooms') }}</span
            >
            <span class="live-number"
              >{{ t('detail.living') }} {{ roomDetail.info.liveNumber }}
              {{ t('detail.personNumber') }}</span
            >
          </div>
          <div class="tags">
            <el-tag size="small" class="ml-10"
              >{{ roomDetail.info.remarks }} {{ t('detail.remarks') }}</el-tag
            >
            <el-tag
              type="danger"
              size="small"
              class="ml-10"
              v-if="roomDetail.info.metro"
              >{{ t('detail.nearSubway') }}</el-tag
            >
            <el-tag
              type="warning"
              size="small"
              class="ml-10"
              v-if="roomDetail.info.parking"
              >{{ t('detail.freeParking') }}</el-tag
            >
            <el-tag
              type="success"
              size="small"
              class="ml-10"
              v-if="roomDetail.info.luggage"
              >{{ t('detail.luggage') }}</el-tag
            >
          </div>
          <!--房东信息-->
          <div class="owner-detail">
            <img :src="roomDetail.owner.avatar" alt="" />
            <div class="info">
              <p>{{ t('detail.landlord') }}：{{ roomDetail.owner.name }}</p>
              <p>
                <span v-if="roomDetail.owner.certify">{{
                  t('detail.authenticated')
                }}</span>
                <span v-if="roomDetail.info.goodOwner">{{
                  t('detail.greatlandlord')
                }}</span>
              </p>
            </div>
          </div>
          <!--基本技术-->
          <div class="introduce">{{ roomDetail.owner.introduce }}</div>
        </div>
        <el-affix :offset="15">
          <div class="form-part">
            <p class="price">
              <span>¥{{ roomDetail.price }}</span>
              / {{ t('detail.night') }}
            </p>
            <el-form
              ref="ruleForm"
              :model="orderForm"
              class="demo-ruleForm"
              label-position="top"
            >
              <el-form-item
                prop="personNumber"
                :label="t('detail.personNumber')"
              >
                <select v-model="orderForm.personNumber">
                  <option v-for="item in 3" :value="item" :key="item">
                    {{ item }}
                  </option>
                </select>
              </el-form-item>

              <el-button
                class="btn-primary"
                type="primary"
                @click="submitForm"
                >{{ t('detail.order') }}</el-button
              >
            </el-form>
          </div>
        </el-affix>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import '@/assets/scss/detail/index.scss';
</style>
